import { useCallback, useState } from 'react';
import { Button, Collapse, Spin } from 'antd';

import { SettingOutlined, CloseOutlined } from '@ant-design/icons';

import ScrollBarLayout from '@/components/ScrollBarLayout';
import { Appearance } from './Appearance';
import { Data } from './Data';

import cls from 'classnames';
import './styles.less';

const { Panel } = Collapse;

export const Settings = () => {
  const clsSet = 'design-settings';

  const clsPane = 'design-magnify-pane';

  const [visible, setVisible] = useState(false);

  const onOpen = useCallback(() => {
    setVisible(true);
  }, [visible]);

  const onClose = useCallback(() => {
    setVisible(false);
  }, [visible]);

  return (
    <div className={cls(`${clsSet}-layout`)}>
      <div className={cls(`${clsSet}-btn`)}>
        {!visible && (
          <div className={cls(`${clsSet}-btn-icon`)}>
            <Button
              icon={<SettingOutlined />}
              type="primary"
              onClick={onOpen}
            ></Button>
          </div>
        )}
      </div>
      {visible && (
        <div className={cls(`${clsSet}-pane`)}>
          <div className={cls(`${clsPane}-layout`)}>
            <div className={cls(`${clsPane}-header`)}>
              <div className={cls(`${clsPane}-title`)}>属性</div>
              <div
                className={cls({
                  [`${clsPane}-icon`]: true,
                  [`${clsPane}-icon-hover`]: true,
                })}
                onClick={onClose}
              >
                <CloseOutlined />
              </div>
            </div>
            <div className={cls(`${clsPane}-content`)}>
              <ScrollBarLayout>
                <Spin spinning={false}>
                  <Collapse expandIconPosition={'start'} bordered={true}>
                    <Panel header={'外观'} key="appearance">
                      <Appearance />
                    </Panel>
                    <Panel header={'数据'} key="data">
                      <Data />
                    </Panel>
                  </Collapse>
                </Spin>
              </ScrollBarLayout>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};
